<th:block xmlns:th="http://www.thymeleaf.org" th:fragment="markdown">

    <!-- 配置文件 -->
    <script type="text/javascript" charset="utf-8" th:src="@{/static/uedit/lang/zh-cn/zh-cn.js}"></script>
    <script type="text/javascript" th:src="@{/static/uedit/ueditor.config.js}"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" th:src="@{/static/uedit/ueditor.all.js}"></script>


    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#menu1" onclick="replaceMenu()"><h6 class="text-dark">MarkDown编辑器</h6></a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#menu2" ><h6 class="text-danger">富文本编辑器</h6></a>
        </li>
    </ul>
    <br/>

    <!--头部 输入内容-->
    <div class="container">
        <div class="input-group mb-3 ">
            <div class="input-group-prepend">
                <span class="input-group-text">标题</span>
            </div>
            <input type="text" id="title" class="form-control" placeholder="请输入标题内容" aria-label="Username"
                   aria-describedby="basic-addon1" th:value="${data.title}">
        </div>

        <div>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">类别</span>
                </div>
                <select class="form-control" id="selectLabels">
                    <option th:each="item:${data.labels}" th:value="${item.id}"
                            th:text="${item.name}"
                            th:selected="${data.labelId!=null && data.labelId==item.id}?'selected'">上海
                    </option>
                </select>
            </div>
        </div>
    </div>

    <!-- Tab panes -->
    <div class="tab-content">

        <div id="menu2" class="container tab-pane active"><br>

            <div class="h-100 w-100">
                <textarea  style="height: 400px;" th:utext="${data.detail}" id="richEdit" name="content">

                </textarea>
            </div>
        </div>

    </div>
    <div class="container">
        <button class="btn btn-danger" type="button" onclick="onClickForClear()">清空</button>
        &nbsp;&nbsp;
        <button class="btn btn-success" type="button" onclick="getContent()">提交</button>
    </div>
    <br>
    </div>

    <!--Ueditor Js-->
    <script type="text/javascript">
        var ue = UE.getEditor('richEdit', {
            initialFrameHeight: 400, //设置编辑器高度
            UEDITOR_HOME_URL:$('#ueditUrl').attr("href"),
            scaleEnabled: true
        });

        <!--用于上传文件跳转到controller-->
        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;

        UE.Editor.prototype.getActionUrl = function(action) {
            if(action == 'img' || action == 'uploadscrawl' || action == 'uploadimage' || action == 'catchimage' ||
                action == 'uploadfile') {
                return serverUrl+"/ueditor-upload";
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        }
    </script>

    <!--获取服务器地址-->
    <a th:href="@{/admin}" class="hide" id="serverUrl"></a>
    <!--获取Uedit地址-->
    <a th:href="@{/static/uedit/}" class="hide" id="ueditUrl"></a>


    <div th:replace="/util :: bootalert(msg='Error')"></div>

    <!--获取内容的  JS MD用-->
    <script type="text/javascript">
        //服务器地址路径
        var serverUrl = document.getElementById("serverUrl").getAttribute("href");

        function getContent() {
            var content = UE.getEditor('richEdit').getContent();
            var title = $('#title').val();
            var labelId = $('#selectLabels').val();

            console.log("content:" + content + "-title:" + title + "-labelsId:" + labelId);

            //1代表Markdown类型的文本 ，0 代表UEditor
            var contentType = 0;
            //是更新还是创建
            var contentId = [[${data.id!=null?data.id:-100}]];
            //在这里判断

            if (!isNotBlank(content) || !isNotBlank(title) || !isNotBlank(labelId)) {
                alert("请输入完整内容");
                return;
            }

            var boot_alert = $('#my-boot-alert');

            //发送请求
            $.ajax({
                type: 'post',
                url: serverUrl + "/create-update-content",
                data: {_method: "put", id: contentId, detail: content, labelId: labelId, title: title, contentType: contentType},
                success: function (d, s, t) {
                    var resultMsg = d.msg;
                    $('#my-boot-alert-text').html(resultMsg);
                    boot_alert.modal('show');
                    console.log(d);
                },
                error: function () {
                    alert("ERROR:出错啦!")
                }
            });
        }

        /**
         * 点击关闭按钮的响应事件
         */
        $("#my-boot-alert-dismiss").click(function () {
            $('.modal-backdrop').remove();
            replaceLeftStatusByJs(3);
            item_3($('#selectLabels').val());
        });

        /**
         * 清除内容
         */
        function onClickForClear() {
            ue.setContent('');
        }

        /**
         * 切换到 富文本编辑器的状态
         */
        function replaceMenu() {
            $.get(localUrl + '/handle-content?type=1', function (d, s, t) {
                var result = t.responseText;
                updateFragment(result);
            });
        }
    </script>
</th:block>